@import "@/MUI/style/var.scss";

//阿里字体库
@import "../font/iconfont/iconfont.css";
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont"; /* Project id 3580592 */
  src: url("../font/iconfont/iconfont.woff2") format("woff2"),
    url("../font/iconfont/iconfont.woff") format("woff"),
    url("../font/iconfont/iconfont.ttf") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

//标签==============================================================
* {
  //font-style: normal;
  box-sizing: border-box;
}

html {
  font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif; // "Noto Sans SC", "Noto Sans",
  //font: 20px Arial, "Microsoft YaHei", sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media screen and(max-width: 1920px) {
  html {
    overflow: auto !important;
  }
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
}

// 去掉默认样式
tr,
th {
  font-weight: normal;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
//自动填充样式
input:-webkit-autofill {
  background-image: none;
  box-shadow: 0 0 0 1000px white inset;
}
//选中时外边框
input {
  outline: none;
}

//数字输入框 按钮
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

img[src=""],
img:not([src]) {
  opacity: 0;
}

pre {
  margin: 0;
  font-family: inherit;
}

//类==================================================================

//宽高
.w {
  width: 100%;
}
.h {
  height: 100%;
}
.w50 {
  width: 50%;
}

.h50 {
  height: 50%;
}
.wh {
  width: 100%;
  height: 100%;
}

//display
.db {
  display: block;
}

.dl {
  display: inline-block;
}

//显示隐藏
.hide {
  display: none;
}

.hidden {
  visibility: hidden;
}

/*position*/
.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.pf {
  position: fixed;
}

/*clear and float*/
.clear::after,
.row::after {
  content: "";
  display: table;
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

//间距
.gap {
  display: inline-block;
  width: px2(10);
  height: px2(1);
  vertical-align: middle;
}

/*文字 setting*/
.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.t-normal {
  font-weight: normal;
}

.t-weight {
  font-weight: 700;
}

.t-weightM {
  font-weight: 400;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//交互
.click {
  &:active {
    opacity: 0.8;
  }

  &:hover {
    cursor: pointer;
  }
}

.cursor,
.hover {
  &:hover {
    cursor: pointer;
  }
}

//其他
.BH {
  border: 1px dashed red;
}
.gap {
  display: inline-block;
  width: px2(10);
  height: 100%;
  min-height: 1px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

.loadingPoint{
  &::after{
    display: inline;
    animation: loadingPoint 3.2s infinite linear;
    content: "";
  }
  @keyframes loadingPoint {
    0% {content: " "}
    25% {content: " ."}
    50% {content: " .."}
    75% {content: " ..."}
  }
}

.mt {
  margin-top: $gap;
}
.mr {
  margin-right: $gap;
}
.mb {
  margin-bottom: $gap;
}
.ml {
  margin-left: $gap;
}
.iconIdentifyImg {
  width: px2(20);
  height: px2(20);
  align-items: top;
  justify-content: top;
}
.status-gray {
  color: $fontColorL;
  padding-left: px2(16);
  position: relative;
  display: inline-block;
  &::before {
    content: "";
    width: px2(8);
    height: px2(8);
    border-radius: 50%;
    position: absolute;
    left: px2(4);
    top: 50%;
    transform: translateY(-50%);
    background-color: $fontColorL;
  }
}
.status-red {
  @extend .status-gray;
  color: $red;
  &::before {
    background-color: $red;
  }
}
.status-yellow {
  @extend .status-gray;
  color: $yellow;
  &::before {
    background-color: $yellow;
  }
}
.status-green {
  @extend .status-gray;
  color: $green;
  &::before {
    background-color: $green;
  }
}
.status-blue {
  @extend .status-gray;
  color: $blue;
  &::before {
    background-color: $blue;
  }
}

//动画
.rotateAni {
  animation: rotateAni 8s linear infinite;
}

@keyframes rotateAni {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.rotateReverseAni {
  animation: rotateReverseAni 8s linear infinite;
}

@keyframes rotateReverseAni {
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}

.flashAni {
  -webkit-animation: flash 4s 0.2s ease both infinite;
}

@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.4;
  }
}

@-moz-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.4;
  }
}
